<nz-select
  style="width: 100%;"
  nzAllowClear
  nzShowSearch
  [nzPlaceHolder]="placeholder"
  [nzLoading]="isLoading"
  [nzDisabled]="disabled"
  [nzServerSearch]="true"
  [compareWith]="compareFn"
  [(ngModel)]="value"
  (nzOnSearch)="onSearch($event)"
  (nzScrollToBottom)="loadMore()"
  (ngModelChange)="modelChange($event)"
>
  <nz-option *ngFor="let item of optionList$ | async" [nzValue]="item" [nzLabel]="item.name || item.nameEN || item.num" nzCustomContent>
    <span nz-tooltip [nzTitle]="item.num + ',' + item.name + ',' + (item.nameEN || '无')" nzPlacement="left">
      {{item.num + ', ' + item.name + ', ' + (item.nameEN || '无')}}
      <small>{{item.num}}</small>
    </span>
  </nz-option>
  <nz-option *ngIf="isLoading" nzDisabled nzCustomContent>
    <i nz-icon type="loading" class="loading-icon"></i> Loading Data...
  </nz-option>
</nz-select>
